@zz85によるresize&drag&snap scriptをcode readingする

readingだけではなくwritingもするつもりだが

ともかくどんな原理で動いているのかを調べる

https://codepen.io/zz85/pen/gbOoVP

2022-02-04

05:42:55 async-awaitで書き換えてみる

resize&drag&snap scriptのasync-await書き換えテスト

22:50:31 調査終了

snappingやresizeに対応していることを除けば、特段特別な仕組みを使っているわけではない

down→move→upの流れは変わらず

違うのはここかな

downのあとにEvent.preventDefault()を実行

mouse deviceとtouch deviceとでevent処理を少しだけ変えている

code:index.ts

* @author https://twitter.com/blurspline / https://github.com/zz85

* See post @ http://www.lab4games.net/zz85/blog/2014/11/15/resizing-moving-snapping-windows-with-js-css/

import { setBounds } from "./setBounds.ts";

// Minimum resizable area

const minWidth = 60;

const minHeight = 40;

// Thresholds

const FULLSCREEN_MARGINS = -10;

const MARGINS = 4;

// End of what's configurable.

code:setBounds.ts

export function setBounds(

element: HTMLElement,

x: number, y: number,

w: number, h: number

) {

element.style.left = ${x}px;

element.style.top = ${y}px;

element.style.width = ${w}px;

element.style.height = ${h}px;

}

code:index.ts

const ghostpane = document.getElementById("ghostpane")!;

function hintHide(b: DOMRect) {

setBounds(ghostpane, b.left, b.top, b.width, b.height);

ghostpane.style.opacity = 0;

}

event listenersの登録

mouse eventもtouch eventも同一のevent workflowonDown()→onMove()→onUp()を用いている

code:index.ts

const pane = document.getElementById("pane")!;

// Mouse events

pane.addEventListener("mousedown", (e) => {

onDown(e);

e.preventDefault();

});

document.addEventListener("mousemove", onMove);

document.addEventListener("mouseup", onUp);

// Touch events

pane.addEventListener("touchstart", (e) => {

onDown(e.touches0);

e.preventDefault();

});

document.addEventListener("touchmove", (e) =>

onMove(e.touches0)

);

document.addEventListener("touchend", (e) => {

// すべてのpointersが画面から離れたら終了とみなす

if (e.touches.length === 0) onUp(e.changedTouches0);

});

pointerの各種情報

すべてのpointer eventで更新する

code:index.ts

let data: {

e: MouseEvent | Touch;

b: DOMRect;

x: number;

y: number;

/** pointerがコンテナの端にあるかどうか */

onRightEdge: boolean;

onBottomEdge: boolean;

onLeftEdge: boolean;

onTopEdge: boolean;

/** 画面の端との距離 */

rightScreenEdge: number;

bottomScreenEdge: number;

};

pointer down時のデータをclickedに格納する

code:index.ts

let clicked: {

x: number;

y: number;

cx: number;

cy: number;

w: number;

h: number;

state: "resize" | "drag" | "neutral";

onLeftEdge: boolean;

onTopEdge: boolean;

onRightEdge: boolean;

onBottomEdge: boolean;

} | { state: "neutral"; } = { state: "neutral" };

function onDown(e: MouseEvent | Touch) {

const {

x, y, b,

...rest

} = calc(e);

四端のいずれか付近でpointerを押下したときリサイズ処理に切り替える

code:index.ts

const isResizing = rest.onRightEdge ||

rest.onBottomEdge ||

rest.onTopEdge ||

rest.onLeftEdge;

data = { x, y, b, e, ...rest };

clicked = {

cx: e.clientX,

cy: e.clientY,

w: b.width,

h: b.height,

state: isResizing ? "resize" :

canMove(x, y, b) ? "drag" :

"neutral",

...rest

};

}

座表計算とスナップ及びリサイズの可否判定

code:index.ts

const canMove = (x: number, y: number, b) =>

x > 0 && x < b.width && y > 0 && y < b.height && y < 30;

function calc(e: MouseEvent | Touch) {

const b = pane.getBoundingClientRect();

const x = e.clientX - b.left;

const y = e.clientY - b.top;

return {

onTopEdge: y < MARGINS,

onLeftEdge: x < MARGINS,

onRightEdge: x >= b.width - MARGINS,

onBottomEdge: y >= b.height - MARGINS,

rightScreenEdge: window.innerWidth - MARGINS,

bottomScreenEdge: window.innerHeight - MARGINS,

};

}

pointer moveで座標とポインタ情報を更新する

更新したときのみ再描画する

code:index.ts

let redraw = false;

function onMove(e: MouseEvent | Touch) {

data = { e, ...calc(e) };

redraw = true;

}

描画サイクル

無限ループ

code:index.ts

animate();

let preSnapped: {

width: number;

height: number;

} | null;

function animate() {

requestAnimationFrame(animate);

if (!redraw) return;

redraw = false;

const { x, y, b, e } = data;

switch (clicked?.state) {

case "resize": {

if (clicked.onRightEdge) pane.style.width = `${

Math.max(x, minWidth)

}px`;

if (clicked.onBottomEdge) pane.style.height = `${

Math.max(y, minHeight)

}px`;

if (clicked.onLeftEdge) {

const currentWidth = Math.max(clicked.cx - e.clientX + clicked.w, minWidth);

if (currentWidth > minWidth) {

pane.style.width = ${currentWidth}px;

pane.style.left = ${e.clientX}px;

}

if (clicked.onTopEdge) {

const currentHeight = Math.max(clicked.cy - e.clientY + clicked.h, minHeight);

if (currentHeight > minHeight) {

pane.style.height = ${currentHeight}px;

pane.style.top = ${e.clientY}px;

}

hintHide(b);

return;

}

case "drag": {

if (b.top < FULLSCREEN_MARGINS ||

b.left < FULLSCREEN_MARGINS ||

b.right > window.innerWidth - FULLSCREEN_MARGINS ||

b.bottom > window.innerHeight - FULLSCREEN_MARGINS

) {

// hintFull();

setBounds(ghostpane, 0, 0, window.innerWidth, window.innerHeight);